﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tab.aspx.cs" Inherits="GeoWeb.Demo.MainTemplate.templates_005.web.tab.tab" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/tab.css" rel="stylesheet" type="text/css" />
    <script src="../../../../Script/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../../../3DStatisticalChart/js/raphael.js" type="text/javascript"></script>
    <script src="../../../../3DStatisticalChart/js/highcharts.js" type="text/javascript"></script>
    <script src="../../../../3DStatisticalChart/js/Chart3D-1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ChatShow(ContainerID, chat_type, chat_title, chat_x, chat_Data,picID) {
            return chart = new $.Chart3D({
                chart: {
                    renderTo: ContainerID,
                    type: chat_type
                },
                title: {
                    text: chat_title,
                    x: -20 //center
                },
                credits: {//隐藏超链接
                    enabled: false
                },
                xAxis: {
                    categories: chat_x
                },
                yAxis: {
                    title: {
                        text: '销售额(万元)'
                    },
                    formatter: function () {
                        return this.value + "（万元）"
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                plotOptions: {
                    column: {
                        pointPadding: 10
                    },
                    series: {
                        point: {
                            events: {
                                click: function () {
                                    if (picID) {
                                        var title = this.series.name + '销售纪录详细';
                                        var Pie_data = {};
                                        Pie_data.data = this.series.data;
                                        ChatShow(picID, "pie", title, chat_x, [Pie_data]);
                                    }
                                }
                            }
                        }
                    }
                },
                series: chat_Data
            });
        }
        $(function () {
            var chat_type = "column",
            chat_title = "销售人员月销售额",
            chat_x = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            chat_Data = [{ name: '张珊',
                data: [49.9, 71.5, 106.4, 199, 144.0, 176.0, 135.6, 148.5, 111.4, 194.1, 95.6, 54.4]
            }, {
                name: '李斯',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }];
            bodyLayer();
            var line = ChatShow("div3", "line", chat_title, chat_x, chat_Data, "div4");
            var column = ChatShow("div1", "column", chat_title, chat_x, chat_Data, "div2");
            var pie = ChatShow("div2", "pie", '个人销售额', chat_x, [chat_Data[0]]);
            var pie = ChatShow("div4", "pie", '个人销售额', chat_x, [chat_Data[0]]);

            $(window).resize(function () {
                bodyLayer();
                column.setSize($("#div1").width(), $("#div1").height());
                line.setSize($("#div3").width(), $("#div3").height());

            });
            $(window).resize();
        });
        function bodyLayer() {
            $("#wrapper").height((document.documentElement.clientHeight || document.body.clientHeight)).width((document.documentElement.clientWidth || document.body.clientWidth));
            $("#wrapper").css("min-width", 960);
            var winWidth = $("#wrapper").width();
            var winHeight = $("#wrapper").height();
            $(".divItem").css("height", (winHeight / 2 - 20));
            $(".left").width(winWidth * 0.7 - 20);
            $(".right").width(winWidth * 0.3 - 20);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <div id="div1" class="divItem left"></div>
            <div id="div2" class="divItem right"></div>
            <div id="div3" class="divItem left"></div>
            <div id="div4" class="divItem right"></div>
        </div>
    </form>
</body>
</html>
